<template>
  <div class="notification">
    <sticky-header :top="120">
    <div class="head header sticky-header">
      <div class="head_left">
        <router-link :to="{name: 'inform-template-list', query: this.$route.query}">
          <el-button plain icon="el-icon-back" size="small" :round="true">
            返回
          </el-button>
        </router-link>
        <p class="title">{{tagEmu[this.$route.query.tag]}}</p><span class="desc"></span>
      </div>
      <div class="button_list">
        <el-button type="primary" @click="activeForm = 2" v-if="activeForm === 1">下一步</el-button>
        <el-button  @click="activeForm = 1" v-if="activeForm === 2">上一步</el-button>
        <el-button type="primary" @click="handleSubmit('infoForm')" :loading="submitLoading" v-if="activeForm === 2">保存</el-button>
      </div>
    </div>
    </sticky-header>
    <div class="template" style="background: #fff">

      <div class="steps">
        <el-steps :active="activeForm" align-center>
          <el-step title="选择邮件模板"></el-step>
          <el-step title="编辑模板"></el-step>
        </el-steps>
      </div>

      <div class="ant-radio-group ant-radio-group-outline" style="display: flex; flex-wrap: wrap; width: 100%;box-sizing: border-box;padding-left: 20px;padding-right: 20px"
           v-if="activeForm === 1">
        <div @click="info.emailModelStyle = 1" :class="{'ant-radio-wrapper-checked': info.emailModelStyle === 1}" class="ant-radio-wrapper">
          <span>
            <div class="template_item">
              <p class="title">模板一</p>
              <div data-img="true" class="img_more" :style="{backgroundImage:`url('${bagEmu[this.$route.query.tag][0]}')`}" style="padding-bottom: 60%; background-position: center center;"></div>
              <div class="button__wrap" style="transform: none;">
                 <el-button type="primary" class="ant-btn ant-btn-primary" @click.stop="handlePrew(bagEmu[tagName][0])"><span>预 览</span></el-button>
              </div>
            </div>
          </span>
        </div>

        <div
            @click="info.emailModelStyle = 2" :class="{'ant-radio-wrapper-checked': info.emailModelStyle === 2}"
            class="ant-radio-wrapper"><span class="ant-radio"><span
            class="ant-radio-inner"></span></span><span><div class="template_item"><p class="title">模板二</p><div
            data-img="true" class="img_more"
            :style="{backgroundImage:`url('${bagEmu[this.$route.query.tag][1]}')`}"
            style=" padding-bottom: 60%; background-position: center center;"></div><div
            class="button__wrap" style="transform: none;">
          <el-button type="primary" class="ant-btn ant-btn-primary" @click.stop="handlePrew(bagEmu[tagName][1])"><span>预 览</span></el-button></div></div></span>
        </div>
      </div>

      <div v-if="activeForm === 2">
        <div style="height: 600px;overflow-x: scroll;margin-bottom: 20px">
          <template1 :value="info" :tagName="tagName" v-if="info.emailModelStyle  === 1"></template1>
          <template2 :value="info" :tagName="tagName" v-if="info.emailModelStyle  === 2"></template2>
        </div>
        <el-row>
          <el-col :span="18">
            <el-form ref="infoForm" :model="info" :rules="rules" label-width="140px">
              <el-form-item label="模板名称" prop="emailModelName">
                <el-input v-model="info.emailModelName" placeholder="请输入模板名称" style="width: 400px"/>
              </el-form-item>
              <el-form-item label="邮件店铺 icon" class="no-border pic">
                <ele-form-upload-plus-file v-model="info.emailModelIconUrl" title="图片"/>
                <b style="color: #80869e;font-size: 12px">店铺icon为邮件内显示的店铺图标，一般尺寸为50x50px</b>
              </el-form-item>
              <el-form-item label="邮件店铺名">
                <el-input style="position: fixed;bottom: -9999px"></el-input>
                <el-input v-model="info.emailModelSiteName" placeholder="请输入邮件店铺名。" auto-complete="off"
                          style="width: 400px"/>
              </el-form-item>
              <el-form-item label="邮件标题" prop="emailModelTitle">
                <el-input v-model="info.emailModelTitle" placeholder="请输入邮件标题。" auto-complete="off"
                          style="width: 400px"/>
              </el-form-item>
              <el-form-item label="邮件正文" prop="emailContentCode">
                <tinymce v-model="info.emailContentCode" :height="300"/>
              </el-form-item>
              <el-form-item label="邮件配图" class="no-border pic">
                <ele-form-upload-plus-file v-model="info.emailModelBackUrl" title="图片"/>
                <b style="color: #80869e;font-size: 12px">邮件配图为邮件内显示的图片，一般尺寸为440x230px</b>
              </el-form-item>
              <el-form-item label="按钮文案" prop="emailModelButtonMsg" v-if="this.$route.query.tag !== 'member_reset_password'">
                <el-input v-model="info.emailModelButtonMsg" placeholder="请输入按钮文案。" auto-complete="off"
                          style="width: 400px"/>
              </el-form-item>
              <el-form-item label="按钮背景色" v-if="this.$route.query.tag !== 'member_reset_password'">
                <el-color-picker
                    v-model="info.emailModelButtonBackColor"
                    :predefine="predefineColors">
                </el-color-picker>
              </el-form-item>
              <el-form-item label="按钮文字颜色" v-if="this.$route.query.tag !== 'member_reset_password'">
                <el-color-picker
                    v-model="info.emailModelButtonMsgColor"
                    :predefine="predefineColors">
                </el-color-picker>
              </el-form-item>
              <el-form-item label="邮件跳转店铺链接">
                <el-input v-model="info.emailModelButtonUrl" placeholder="输入跳转链接。" auto-complete="off"
                          style="width: 400px"/>
                <p style="color: #80869e;font-size: 12px">默认跳转C端checkout页</p>
              </el-form-item>
<!--              <el-form-item>
                <el-button type="primary" @click="handleSubmit('infoForm')" :loading="submitLoading">保存</el-button>
                <el-button @click="handleReset('infoForm')">取消</el-button>
              </el-form-item>-->
            </el-form>
          </el-col>
        </el-row>
      </div>
    </div>
    <el-dialog title="预览" :visible.sync="isOpenPreview" :append-to-body="true">
      <img
          :src="imgValue"
          class="gallery-image"
          style="width: 100%"
      >
    </el-dialog>
  </div>
</template>

<script>
import template1 from './notification-template1';
import template2 from './notification-template2';
import Tinymce from '@/components/Tinymce';
import stickyHeader from '_c/StickyHeader';
import {addEmailModels} from '@/api/inform';
import {mapGetters} from 'vuex';

export default {
    name: 'template-add.vue',
    components: {template1, template2, Tinymce, stickyHeader},
    data () {
        return {
            tagEmu: {
                order_confirm: '订单提交模板管理',
                order_send_goods: '发货通知模板管理',
                order_confirm_goods: '收货通知模板管理',
                member_reset_password: '重设会员密码模板管理',
                marketing_return: '放弃订单挽留模板管理',
                marketing_activity: '放弃订单挽留模板管理'
            },
            tagName: this.$route.query.tag,
            isOpenPreview: false,
            imgValue: '',
            defaultInfo: {
                order_confirm: {
                    emailModelTitle: 'ORDER CONFIRMED',
                    emailContentCode: 'Hello, We\'re getting your order ready to be dispatched. We will notify you when it has been shipped.',
                    emailModelButtonMsg: 'View Your Order'
                },
                order_send_goods: {
                    emailModelTitle: 'ORDER SHIPPED',
                    emailContentCode: 'Hello, Your order has been shipped. Track your shipment to see the delivery status.',
                    emailModelButtonMsg: 'Track Your Shipment'
                },
                order_confirm_goods: {
                    emailModelTitle: 'ORDER DELIVERED',
                    emailContentCode: 'Hello, Your order has been delivered. Thank you for your purchase. Track your shipment to see the delivery status.',
                    emailModelButtonMsg: 'Track Your Shipment'
                },
                member_reset_password: {
                    emailModelTitle: 'Reset Your Password',
                    emailContentCode: 'Hello, Here is the validation code you need to reset your password. If you didn\'t request a new password, you can safely delete this email.',
                    emailModelButtonMsg: ''
                },
                marketing_return: {
                    emailModelTitle: 'You left items in your cart',
                    emailContentCode: 'Hello, You added items to your shopping cart and haven\'t completed your purchase. You can complete it now while they\'re still available',
                    emailModelButtonMsg: 'Items in your cart'
                },
                marketing_activity: {
                    emailModelTitle: 'You left items in your cart',
                    emailContentCode: 'Hello, You added items to your shopping cart and haven\'t completed your purchase. You can complete it now while they\'re still available',
                    emailModelButtonMsg: 'Items in your cart'
                }
            },
            bagEmu: {
                order_confirm: ['https://cdn.shoplazzay.com/1711758358234s45vr9.png', 'https://cdn.shoplazzay.com/1711758364524fs8tom.png'],
                order_send_goods: ['https://cdn.shoplazzay.com/1711758918052dcm58y.cc76', 'https://cdn.shoplazzay.com/17117589321822lj0z7.c7e7'],
                order_confirm_goods: ['https://cdn.shoplazzay.com/17117593131890hsrvl.png', 'https://cdn.shoplazzay.com/1711759318663x2166v.png'],
                member_reset_password: ['https://cdn.shoplazzay.com/1711759544386sakpdg.dcf7', 'https://cdn.shoplazzay.com/1711759549678thr5of.05b2'],
                marketing_return: ['https://cdn.shoplazzay.com/17117604417931or0gx.png', 'https://cdn.shoplazzay.com/1711760447007866o3v.png'],
                marketing_activity: ['https://cdn.shoplazzay.com/17117604417931or0gx.png', 'https://cdn.shoplazzay.com/1711760447007866o3v.png']
            },
            singleBagEmu: ['https://cdn.shoplazzay.com/171176104909799f0we.jpg', 'https://cdn.shoplazzay.com/17117610541258vz2pv.jpg'],
            predefineColors: [
                '#ff4500',
                '#ff8c00',
                '#ffd700',
                '#90ee90',
                '#00ced1',
                '#1e90ff',
                '#c71585',
                'rgba(255, 69, 0, 0.68)',
                'rgb(255, 120, 0)',
                'hsv(51, 100, 98)',
                'hsva(120, 40, 94, 0.5)',
                'hsl(181, 100%, 37%)',
                'hsla(209, 100%, 56%, 0.73)'
            ],
            uploadPath: process.env.VUE_APP_BASE_API + '/upload-file',
            activeForm: 1,
            info: {
                emailModelSiteName: '',
                emailModelBackUrl: '',
                emailModelIconUrl: '',
                emailModelName: '新模板',
                emailModelStyle: 1,
                emailContentCode: 'Hello, Your order has been shipped. Track your shipment to see the delivery status.',
                emailModelTitle: 'Order Shipped',
                emailModelButtonMsg: 'Track Your Shipment',
                emailModelButtonBackColor: '#000',
                emailModelButtonMsgColor: '#fff'
            },
            rules: {
                emailModelName: [
                    {required: true, message: '请输入模板名称', trigger: 'blur'}
                ],
                emailModelSiteName: [
                    {required: true, message: '请输入店铺名称', trigger: 'blur'}
                ],
                emailModelTitle: [
                    {required: true, message: '请输入邮件标题', trigger: 'blur'}
                ],
                emailContentCode: [
                    {required: true, message: '请输入邮件正文', trigger: 'blur'}
                ],
                emailModelButtonMsg: [
                    {required: true, message: '请输入按钮文案', trigger: 'blur'}
                ]
            },
            submitLoading: false
        };
    },
    watch: {
        'info.emailModelStyle' () {
            this.info.emailModelBackUrl = this.singleBagEmu[this.info.emailModelStyle - 1];
        }
    },
    computed: {
        ...mapGetters(['siteList']),
        siteId () {
            return this.$store.state.user.siteId;
        },
        siteInfo () {
            let info = this.siteList.find(res => res.id === Number(this.siteId));
            return info;
        }
    },
    mounted () {
        this.info.emailModelBackUrl = this.singleBagEmu[this.info.emailModelStyle - 1];
        this.info.emailModelIconUrl = this.siteInfo.faviconUrl;
        this.info.emailModelSiteName = this.siteInfo.name;
        this.info = Object.assign(this.info, this.defaultInfo[this.tagName]);
    },
    methods: {
        handlePrew (img) {
            this.isOpenPreview = true;
            this.imgValue = '';
            setTimeout(() => {
                this.imgValue = img;
            }, 1200);
        },
        handleResponse (response, file, fileList) {
            return response;
        },
        handleSubmit (name) {
            this.$refs[name].validate(valid => {
                if (valid) {
                    addEmailModels({siteId: this.siteId, emailType: this.$route.query.emailType, emailTypeDetail: this.$route.query.noticeId, ...this.info}).then(res => {
                        this.$message.success('新增成功');
                        this.$router.push({ name: 'inform-template-list', query: this.$route.query });
                    });
                    // this.submitLoading = true;
                }
            });
        },
        handleReset (name) {
            // this.$router.push({ name: 'site-list' });
        }
    }
};
</script>

<style scoped lang="scss">
.notification {
  .header {
    &.fixed{
      background: #fff;
    }
    padding: 20px 0;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .head_left{
      display: flex;
      align-items: center;
    }
    .title{
      margin-left: 6px;
    }
  }

  .template {
    padding-top: 20px;
  }

  .ant-radio-wrapper {
    width: 33.33%;
    margin-right: 0;

    .ant-radio {
      display: none;
    }

    .template_item {
      margin-bottom: 70px;
      margin-right: 5%;
      position: relative;
      border-radius: 8px 8px 0 0;

      &:nth-child(3n) {
        margin-right: 0;
      }

      .title {
        font-size: 16px;
        color: #212121;
        margin-bottom: 10px;
      }

      .desc {
        font-size: 14px;
        color: #8c8c8c;
        line-height: 24px;
        margin-bottom: 15px;
        min-height: 48px;
      }

      .img_more {
        width: 100%;
        margin-bottom: 20px;
        border-radius: 2px;
        min-width: 100%;
        padding-bottom: 76%;
        box-shadow: 0 0 5px #ddd;
        background-size: 100%;
        background-repeat: no-repeat;
        background-position: left top;
      }

      .button__wrap {
        display: none;
        width: 100%;
        position: absolute;
        top: 50%;
        justify-content: space-around;
      }

      &:hover .button__wrap {
        display: flex;
      }
    }

    &.ant-radio-wrapper-checked div[data-img] {
      border: 2px solid #2e60f9;
      position: relative;

      &:before {
        content: '';
        position: absolute;
        right: 0;
        top: 0;
        width: 0;
        height: 0;
        border-top: 2em solid #2e60f8;
        border-left: 2em solid transparent;
      }

      &:after {
        content: '';
        width: 0.6em;
        height: 0.9em;
        border-top: 0.15em solid transparent;
        border-left: 0.15em solid transparent;
        border-right: 0.15em solid #fff;
        border-bottom: 0.15em solid #fff;
        position: absolute;
        top: 0.1em;
        right: 0.25em;
        -webkit-transform: rotate(40deg);
        transform: rotate(40deg);
      }
    }
  }
}
</style>
